<template>
	<view class="invitation-page">
		
		<view class="return" @click="goToHomePage"><</view>
		
		<image src="../../../static/images/home/invitation/mipmap-xxxhdpi/2.png"
		class="invitation" @click="quniShare"></image>
		
		<view class="invitationRecord">
			<view class="headline">
				<span>— 我的邀请记录 —</span>
			</view>
			<view class="autonym">
			<p>邀请次数</p><span>{{frequency}} 次</span>
			</view>
			<view class="autonym">
			<p>获赠时长</p><span>{{time}} 时</span>
			</view>
			<view class="activity">
			<p>活动规则</p>
			</view>
			<view class="rule">
			<p>1.邀请好友成功注册并使用爱加速，即可获赠1天免费时长
			<br>2.每月可通过邀请好友注册并使用获得7次奖励<br>3.好友购买正式套餐，邀请人可获得7天时长
			<br>4.若邀请人连接数大于1，所获得时长将按照“时长/连接数”<br>5.双方用户在邀请时被发现违规行为，将被取消违规所得奖励
			<br>6.易上加速器保留在法律规定的范围内对上诉规则进行解释的权利</p>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import { inviteList } from '@/api/user';
	import {ref, onMounted } from 'vue';
	import UniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
	
	const frequency = ref('0') // 邀请次数
	const time = ref('0') // 邀请时长
	// 创建UniShare实例，并使用ref使其变成响应式数据
	const uniShare = ref(new UniShare());
	
	onMounted(() => {
		invitationData();
	})
	
	const invitationData = async() => {
		try {
			 const res = await inviteList();
			 if(res.code == 1){
				frequency.value = res.data.invite_count
				time.value = res.data.gift_hour
				console.log('邀请数据获取成功')
			 }else{
				console.log('邀请数据获取失败',res.msg)
			 }
		} catch (error) {
			console.log('获取邀请数据过程中出现错误',error)
		}
	}
	
	// 分享
	const quniShare = () => {
	    // 直接调用UniShare实例中用于系统原生分享的方法，这里假设方法名为shareSystem（需根据实际情况调整）
	    uniShare.value.shareSystem({
	        content: {
	            type: 0,
	            href: 'https://uniapp.dcloud.io/',
	            title: '标题',
	            summary: '描述',
	            imageUrl: 'https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png'
	        },
	    }, e => {
	        console.log(uniShare.value.isShow);
	        console.log(e);
	    });
	};
	
	// 返回上一页
	const goToHomePage = () =>{
		uni.navigateBack({
			delta:1,
			animationType: 'pop-out',
			animationDuration: 100,
		})
	}
	
	
</script>

<style lang="scss" scoped>
	// 背景
.invitation-page{
	background-color: #3771db;
	background-image: url('@/static/images/home/invitation/mipmap-xxxhdpi/1.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100vw;
	height: 100vh;
	position: relative;
}
	// 返回
.return{
	position: absolute;
	left: 30px;
	top: 40px;
	font-size: 30px;
	color: #ffffff;
	// font-weight: bold;
}
	// 现在邀请
.invitation{
	// display: block;
	// margin: 0 auto;
	width: 150px;
	height: 40px;
	position: absolute;
	top: 300px;
	left: 50%;
	transform: translateX(-50%);
}
	// 邀请记录
.invitationRecord{
	background-color: #ffffff;
	margin-top: 20px;
	position: absolute;
	top: 350px;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	height: 470px;
	border-radius: 15px; /* 设置四个角的圆角半径为10px */
	border-top: 5px solid #f9bf12;
}
.headline{
	// background-color: #55ff00;
	height: 70px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	color: #4393ee;
	font-weight: bold;
}
.autonym{
	width: 87%;
	height: 50px;
	display: block;
	margin: 0 auto;
	position: relative;
	// background-color: #ffaaff;
	display: flex;
	align-items: center;
	border-bottom: 0.5px solid #d7d7d7;
}
.autonym .activity p{
	margin-left: 10px;
	font-size: 17px;
	// background-color: #ff00ff;
}
.autonym span{
	// background-color: #55aa7f;
	position: absolute;
	right: 0;
	color: #000000;
}
.activity{
	width: 87%;
	height: 50px;
	display: block;
	margin: 0 auto;
	position: relative;
	// background-color: #ffaaff;
	display: flex;
	align-items: center;
}
.rule{
	width: 87%;
	height: 240px;
	display: block;
	margin: 0 auto;
	font-size: 12px;
	line-height: 30px;
	// background-color: #ffaaff;
}

</style>
